<template>
  <view class="detail-page" v-if="orderInfo && orderInfo.id">
    <!-- 顶部：订单状态与物流信息 -->
    <view class="card status-card">
      <view class="status-row">
        <text class="status-text" :class="statusClass">
          {{ orderInfo.status_dictText || getStatusText(orderInfo.status) }}
        </text>
      </view>
      <view v-if="orderInfo.dvyType == '0'" class="logistics">
        <view class="log-row" v-if="orderInfo.expressName">
          <text class="label">{{ orderInfo.expressName }}</text>
          <text class="val">{{ orderInfo.expressNo || '暂无单号' }}</text>
        </view>
      </view>
      <view v-else-if="orderInfo.dvyType === 1" class="no-logistics">
        商家选择无物流发货，暂无物流信息
      </view>
      <view class="address" v-if="orderInfo.address">{{ orderInfo.address }}
        <text class="name-phone">{{ orderInfo.takePeople }}</text>
        <text class="name-phone">{{ orderInfo.mobile }}</text>
      </view>
    </view>

    <!-- 商品与店铺信息 -->
    <view class="card goods-card">
      <image class="goods-image" :src="orderInfo.pic" mode="aspectFill"></image>
      <view class="goods-info">
        <view class="goods-name">{{ orderInfo.prodName || '-' }}</view>
        <view class="goods-sub">{{ orderInfo.remark || '' }}</view>
        <view class="goods-meta">
          <text class="price">￥{{ formatPrice(orderInfo.price) }}</text>
          <text class="units" v-if="orderInfo.units">/{{ orderInfo.units }}</text>
          <text class="num">x{{ orderInfo.num || 1 }}</text>
        </view>
      </view>
      <view class="shop-info">
        <image class="shop-avatar" :src="orderInfo.shopHead" mode="aspectFill"></image>
        <view class="shop-name">{{ orderInfo.shopUser || '-' }}</view>
      </view>
    </view>

    <!-- 订单金额与关键信息 -->
    <view class="card info-card">
      <view class="row">
        <text class="label">实付款</text>
        <text class="val price">￥{{ formatPrice(orderInfo.actualTotal) }}</text>
      </view>
      <view class="row">
        <text class="label">商品总价</text>
        <text class="val">￥{{ formatPrice(orderInfo.payable) }}</text>
      </view>
      <view class="row" v-if="preferential > 0">
        <text class="label">优惠</text>
        <text class="val discount">-￥{{ preferential }}</text>
      </view>
    </view>

    <!-- 时间与编号 -->
    <view class="card meta-card">
      <view class="row">
        <text class="label">订单编号</text>
        <text class="val">{{ orderInfo.orderNumber || '-' }}</text>
      </view>
      <view class="row">
        <text class="label">支付时间</text>
        <text class="val">{{ orderInfo.payTime || '-' }}</text>
      </view>
      <view class="row">
        <text class="label">发货时间</text>
        <text class="val">{{ orderInfo.processTime || '-' }}</text>
      </view>
      <view class="row">
        <text class="label">创建时间</text>
        <text class="val">{{ orderInfo.infoTime || '-' }}</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <u-button
          v-if="orderInfo.status === 0"
          type="primary"
          size="small"
          @click="handlePay(orderInfo)"
          :custom-style="{
          marginRight: '20rpx',
          backgroundColor: '#276AEE',
          borderColor: '#276AEE',
          borderRadius: '8rpx',
          fontSize: '28rpx',
          height: '64rpx',
          minWidth: '120rpx'
        }"
      >
        立即支付
      </u-button>
      <u-button
          v-if="orderInfo.status === 3"
          type="default"
          size="small"
          @click="handleConfirm(orderInfo)"
          :custom-style="{
          marginRight: '20rpx',
          backgroundColor: '#276AEE',
          borderColor: '#276AEE',
          color:'#ffffff',
          borderRadius: '8rpx',
          fontSize: '28rpx',
          height: '64rpx',
          minWidth: '120rpx'
        }"
      >
        确认收货
      </u-button>
      <u-button
          v-if="orderInfo.status === 1 && orderInfo.isComm !== 1"
          type="primary"
          size="small"
          @click="handleComment(orderInfo)"
          :custom-style="{
          marginRight: '20rpx',
          backgroundColor: '#276AEE',
          borderColor: '#276AEE',
          borderRadius: '8rpx',
          fontSize: '28rpx',
          height: '64rpx',
          minWidth: '120rpx'
        }"
      >
        立即评价
      </u-button>
      <u-button
          v-if="orderInfo.status === 1"
          type="warning"
          size="small"
          @click="handleRefundApply(orderInfo)"
          :custom-style="{
          marginRight: '20rpx',
          backgroundColor: '#f59a23',
          borderColor: '#f59a23',
          color:'#ffffff',
          borderRadius: '8rpx',
          fontSize: '28rpx',
          height: '64rpx',
          minWidth: '120rpx'
        }"
      >
        申请退款
      </u-button>
      <u-button
          type="default"
          size="small"
          @click="goBack"
          :custom-style="{
          backgroundColor: '#f5f5f5',
          borderColor: '#ddd',
          color: '#666',
          borderRadius: '8rpx',
          fontSize: '28rpx',
          height: '64rpx',
          minWidth: '120rpx'
        }"
      >
        返回
      </u-button>
    </view>
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex'

export default {
  data() {
    return {
      orderId: "",//订单号
      orderInfo: {},//订单信息
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    statusClass() {
      const s = this.orderInfo.status
      if (s === 0) return 'status-pending'
      if (s === 1) return 'status-completed'
      if (s === 2) return 'status-shipping'
      if (s === 3) return 'status-receiving'
      if (s === 4) return 'status-refunded'
      if (s === 5) return 'status-refund-pending'
      return 'status-default'
    },
    preferential() {
      const p = Number(this.orderInfo.payable || 0)
      const a = Number(this.orderInfo.actualTotal || 0)
      const d = p - a
      return d > 0 ? d.toFixed(2) : 0
    }
  },
  onLoad(opt) {
    if (opt && opt.id) {
      this.orderId = opt.id
      this._getOrderDetail(opt.id)
    }
  },
  methods: {
    getStatusText(status) {
      const map = {0: '待支付', 1: '已完成', 2: '待发货', 3: '待收货', 4: '已退款', 5: '待退款'}
      return map[status] || '未知状态'
    },
    formatPrice(v) {
      const n = Number(v || 0)
      return n.toFixed(2)
    },
    // 根据id查询订单详情
    _getOrderDetail(id) {
      let params = {id}
      this.$api.getOrderDetail(params).then(res => {
        if (res.success) {
          this.orderInfo = res.result || {}
          uni.setNavigationBarTitle({
            title: this.getStatusText(res.result.status) ?
                `订单${this.getStatusText(res.result.status)}` : '订单详情'
          });
        }
      })
    },
    handlePay(order) {
      uni.showToast({title: '去支付', icon: 'none'})
    },
    handleConfirm(order) {
      let that = this
      uni.showModal({
        title: '确认收货',
        content: '确认已收到商品？',
        success: (r) => {
          if (r.confirm) {
            let params = {
              id: order.id
            }
            that.$api.addDeliveryFinish(params).then(res => {
              if (res.success) {
                uni.showToast({title: '已确认收货', icon: 'none'})
                that._getOrderDetail(that.orderId)
              }
            })
          }
        }
      })
    },
    // 去评价
    handleComment(order) {
      uni.navigateTo({
        url: `/pagesMall/myShop/appraise?id=${order.id}`
      })
    },
    // 申请退款
    handleRefundApply(order) {
      uni.navigateTo({
        url: `/pagesMall/myShop/refundApply?id=${order.id}`
      })
    },
    goBack() {
      uni.navigateBack()
    }
  },
}
</script>

<style lang="scss" scoped>
.detail-page {
  background: #f5f7fa;
  min-height: 81vh;
  padding-bottom: 140rpx;
  padding-top: 25rpx;
}

.card {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.status-text {
  font-size: 30rpx;
  font-weight: 700;
}

.status-pending {
  color: #fa8c16;
}

.status-completed {
  color: #52c41a;
}

.status-shipping {
  color: #1890ff;
}

.status-receiving {
  color: #ff6b35;
}

.status-refunded {
  color: #f5222d;
}

.status-refund-pending {
  color: #f59a23;
}

.status-default {
  color: #8c8c8c;
}

.status-sub {
  margin-top: 6rpx;
  color: #909399;
  font-size: 24rpx;
}

.no-logistics {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #606266;
}

.address {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #606266;

  .name-phone {
    margin-left: 20rpx;
    font-size: 26rpx;
  }
}

.logistics .log-row {
  display: flex;
  padding-top: 8rpx;

}

.logistics .label {
  color: #303133;
  font-size: 26rpx;
}

.logistics .val {
  color: #303133;
  font-size: 26rpx;
  margin-left: 10rpx;
}

.goods-card {
  display: flex;
  align-items: center;
}

.goods-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background: #f2f3f5;
}

.goods-info {
  flex: 1;
  margin-left: 20rpx;
}

.goods-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1f2d3d;
}

.goods-sub {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #8a9099;
}

.goods-meta {
  margin-top: 10rpx;
  color: #ff4d4f;
  display: flex;
  align-items: baseline;
}

.goods-meta .price {
  font-size: 32rpx;
  font-weight: 700;
}

.goods-meta .units {
  margin-left: 6rpx;
  font-size: 24rpx;
  color: #606266;
}

.goods-meta .num {
  margin-left: 16rpx;
  font-size: 24rpx;
  color: #909399;
}

.shop-info {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #f2f3f5;
}

.shop-name {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #303133;
}

.info-card .row, .meta-card .row {
  display: flex;
  justify-content: space-between;
  padding: 8rpx 0;
}

.info-card .price {
  color: #ff4d4f;
  font-weight: 700;
}

.info-card .discount {
  color: #52c41a;
}

.meta-card .label {
  color: #606266;
  font-size: 26rpx;
}

.meta-card .val {
  color: #303133;
  font-size: 26rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 26rpx;
  background: #fff;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}
</style>
